<template>
	<el-form label-width="80px" :model="form" :rules="rules" ref="queryForm" @submit.prevent>
		<el-row>
			<el-col :span="24">
				<el-form-item label="阶段类型" prop="stage">
					<el-select v-model="form.stage" size="default" placeholder="请选择"
						style="width: 240px" clearable filterable>
						<el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		
		
		<el-row>
			<el-col :span="24">
				<el-form-item label="详细说明" prop="detail">
					<el-input v-model="form.detail" style="width:240px;" type="textarea" rows="8"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24">
				<el-form-item label="图片" prop="imgUrl">
					<el-upload class="upload-demo" action="" list-type="picture-card" :limit="1"
						:http-request="handImport" accept="" ref="uploadRef" :file-list="form.fileList">
						<el-icon class="el-icon--upload">
							<upload-filled />
						</el-icon>
						<div class="el-upload__text">
							<em>点击上传</em>
						</div>
					</el-upload>

				</el-form-item>
			</el-col>
		</el-row>


		<el-row style="margin-bottom: 10px;padding:0 10px;">
			<el-col :span="24">
				<span>请上传 大小不超过 <span style="color: red;">5MB</span> 格式为 <span
						style="color: red;">png/jpg/jpeg</span> 的文件</span>
			</el-col>
		</el-row>


		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>

	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface,
		commonUpload
	} from '@/api/common/common'
	
	import { globalSrc } from '@/utils/global.js'



	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData','options'])

	const form = ref({
		remark: '',
		name: '',
		imgUrl:'',
		fileList: []

	})

	const queryForm = ref('')
	const uploadRef = ref()
	const options = ref([])

	//必填项
	const rules = reactive({
		name: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}]
		
	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}
	
	//上传
	const handImport = (param) => {
		const file = param.file
		if (file.type.indexOf("image/") == -1) {
			ElMessage.error("文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。")
			uploadRef.value.clearFiles();
		} else {
			let fd = new FormData()
			fd.append('file', file)
			commonUpload(fd).then(result => {
				console.log('result',result);
				if(result.code === 200){
					form.value.imgUrl = result.fileName
				}
			})
		}
	}
	

	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/renfang/zzgz/content/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	onMounted(() => {
		options.value = props.options
		if (props.editData){
			form.value = props.editData
			if (props.editData.imgUrl) {
				form.value.fileList = [{
					url: globalSrc + props.editData.imgUrl
				}]
			}
		} 
	})
</script>

<style>
</style>